<template>
    <Transition>
        <div class="contain" v-if="flag">
            <div class="card" style="min-width:600px;">
                <div class="header flex">
                    <div class="goHome flex">
                        <p class="title">物资申领</p>
                    </div>
                    <div class="flex">
                        <button class="submit" @click="printHandle">打印</button>
                        <button class="submit" @click="addHandle"
                            v-loading.fullscreen.lock="fullscreenLoading">提交</button>
                        <el-icon size="22" style="margin-right: 37px; cursor: pointer;" @click="clear">
                            <Close />
                        </el-icon>
                    </div>
                </div>
                <div class="main">
                    <div class="table-container" id="printMain" ref="print" v-for="(page, pageIndex) in pagedMaterials"
                        :key="pageIndex">
                        <!-- Table header information -->
                        <p class="pTitle">{{ title }}</p>
                        <div class="table-header">
                            <div>NO. {{ documentNumber }}</div>
                            <div>第 {{ currentPage }} 页/共 {{ totalPages }} 页</div>
                        </div>
                        <div class="table-info">
                            <span>库房: {{ warehouse }}</span>
                            <span>领用科室: {{ department }}</span>
                            <span>领用人: {{ receiver }}</span>
                            <span> </span>
                        </div>

                        <!-- Main table -->
                        <table>
                            <thead>
                                <tr>
                                    <td>材料信息</td>
                                    <td>材料分类</td>
                                    <td>规格</td>
                                    <td>单位</td>
                                    <td>数量</td>
                                    <td>售价</td>
                                    <td>售价金额</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in page" :key="index">
                                    <td>{{ item.name }}</td>
                                    <td>{{ item.category }}</td>
                                    <td>{{ item.specification }}</td>
                                    <td>{{ item.unit }}</td>
                                    <td>{{ item.quantity }}</td>
                                    <td>{{ item.price }}</td>
                                    <td>{{ item.totalPrice }}</td>
                                </tr>
                                <tr>
                                    <td>本页小计</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>500</td>
                                </tr>
                                <tr>
                                    <td>合&emsp;计</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>500</td>
                                </tr>
                            </tbody>
                        </table>

                        <!-- Footer summary -->
                        <div class="table-footer">
                            <div>摘要</div>
                            <div>填制人: {{ preparer }}</div>
                            <div>填制日期: {{ preparedDate }}</div>
                            <div>领料人签字: &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 1px;height:100px;"></div>
        </div>
    </Transition>
</template>

<script>
import { httpService } from "@/utils/httpService";
import Icon from '@/components/Icon.vue';
import { ArrowLeft, Close } from "@element-plus/icons-vue";
import { ElMessage, ElForm, ElLoading } from "element-plus";

export default {
    name: "leftMenu",
    components: { Icon, ArrowLeft, ElMessage, ElForm, ElLoading, Close },
    data() {
        return {
            flag: false,

            documentNumber: "Y000292",
            warehouse: "物资库房",
            // title: "领用单",
            title: "赵县中医院卫生材料领用单",
            department: "骨科医院",
            receiver: "张三",
            currentPage: 1,
            totalPages: 3,
            preparer: "陈松",
            preparedDate: "2024/11/8 15:22:21",
            materials: [
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },
                { name: "洗衣粉", category: "物资用品", specification: "袋", unit: "20", quantity: 1, price: 10, totalPrice: 10 },

                // Add more items as needed
            ]
        };
    },
    computed: {
        pagedMaterials() {
            const itemsPerPage = 10; // 每页显示10条
            const pages = [];
            for (let i = 0; i < this.materials.length; i += itemsPerPage) {
                pages.push(this.materials.slice(i, i + itemsPerPage));
            }
            console.log(pages);
            return pages;
        }
    },
    mounted() {

    },
    methods: {
        clear() {
            this.flag = false
        },
        // printHandle() {
        //     const printContent = document.getElementById('printMain').innerHTML;
        //     // console.log(printContent);
        //     const WinPrint = window.open('', '', 'width=800,height=600');
        //     WinPrint.document.write('<html><head><title>Print</title>');
        //     WinPrint.document.write(
        //         `<style>
        //         @media print { 
        //             @page {
        //               margin: 20; /* 将页边距设置为0 */
        //             }
        //             body {
        //               margin: 0; 
        //             }
        //             .table-container {
        //              width: 100%;
        //              text-align: center;
        //              font-family: Arial, sans-serif;
        //              border-collapse: collapse;
        //              page-break-after: always; /* 强制分页 */
        //             } 
        //             .table-container:last-child {
        //                 page-break-after: auto; /* 最后一页不分页 */
        //             }

        //             .table-header,
        //             .table-info,
        //             .table-footer {
        //                 display: flex;
        //                 justify-content: space-between;
        //                 padding: 8px;
        //             }

        //             h2 {
        //                 margin: 16px 0;
        //                 text-align:center;
        //             }

        //             table {
        //                 width: 100%;
        //                 border: 1px solid #000;
        //                 border-collapse: collapse;
        //             }

        //             th,
        //             td {
        //                 border: 1px solid #000;
        //             }  
        //             }
        //              </style> 
        //              `);
        //     WinPrint.document.write('</head><body>');
        //     WinPrint.document.write(printContent);
        //     WinPrint.document.write('</body></html>');
        //     WinPrint.document.close();
        //     WinPrint.print();
        //     WinPrint.close();
        // },


        printHandle() {
            const printContent = this.pagedMaterials.map((page, pageIndex) => `
        <div class="table-container">
            <p class="pTitle">${this.title}</p>
            <div class="table-header">
                <div>NO. ${this.documentNumber}</div>
                <div>第 ${pageIndex + 1} 页/共 ${this.pagedMaterials.length} 页</div>
            </div>
            <div class="table-info">
                <span>库房: ${this.warehouse}</span>
                <span>领用科室: ${this.department}</span>
                <span>领用人: ${this.receiver}</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>材料信息</th>
                        <th>材料分类</th>
                        <th>规格</th>
                        <th>单位</th>
                        <th>数量</th>
                        <th>售价</th>
                        <th>售价金额</th>
                    </tr>
                </thead>
                <tbody>
                    ${page.map(item => `
                        <tr>
                            <td>${item.name}</td>
                            <td>${item.category}</td>
                            <td>${item.specification}</td>
                            <td>${item.unit}</td>
                            <td>${item.quantity}</td>
                            <td>${item.price}</td>
                            <td>${item.totalPrice}</td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
            <div class="table-footer">
                <div>摘要</div>
                <div>填制人: ${this.preparer}</div>
                <div>填制日期: ${this.preparedDate}</div>
                <div>领料人签字: &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;</div>
            </div>
        </div>
        <div style="page-break-after: always;"></div> <!-- Ensure page breaks between pages -->
    `).join('');

            const WinPrint = window.open('', '', 'width=800,height=800');
            WinPrint.document.write(`
        <html>
        <head>
            <title>打印</title>
            <style>
                @media print { 
                    @page {
                        // margin: 20mm; 
                        margin: 30px 20mm;
                    }
                    body {
                        margin: 0;
                        font-family: Arial, sans-serif;
                    }
                    .table-container {
                        width: 100%;
                        text-align: center;
                        page-break-before: always; /* 强制每个新内容开始时分页 */
                    }
                    .table-container:last-child {
                        page-break-after: auto; /* 最后一页不分页 */
                    }
                    .table-header,
                    .table-info,
                    .table-footer {
                        display: flex;
                        justify-content: space-between; 
                    }
                    .pTitle {
                        font-size: 20px;
                        font-weight: 400;
                        text-align: center;
                    }
                    table {
                        width: 100%;
                        border: 1px solid #000;
                        border-collapse: collapse;
                    }
                    th, td {
                        border: 1px solid #000; 
                        text-align: center;
                    }
                    tr:nth-child(even) {
                        background-color: #f2f2f2; /* Alternate row background */
                    }
                }
            </style>
        </head>
        <body>
            ${printContent}
        </body>
        </html>
    `);
            WinPrint.document.close();
            WinPrint.print();
            WinPrint.close();
        }


    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.contain {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.35);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

.card {
    width: 60%;
    background-color: #fff;
    border-radius: 13px;
    padding-bottom: 50px;
    margin-top: 100px;
    margin-bottom: 100px;
}

.header {
    justify-content: space-between;
    height: 65px;
    border-bottom: 1px solid #D6DBE2;
}

.header .title {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    margin-left: 32px;
}

.submit {
    width: 77px;
    height: 38px;
    background-color: #6F72FF;
    border-radius: 10px;
    border: none;
    margin-right: 32px;
    color: #fff;
    font-size: 15px;
}

.main {
    width: 50vw;
    padding: 23px 52px 0 52px;
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
}

.table-container {
    width: 100%;
    text-align: center;
    font-family: Arial, sans-serif;
    border-collapse: collapse;
}

.table-header,
.table-info,
.table-footer {
    display: flex;
    justify-content: space-between;
    /* padding: 8px; */
}

.pTitle {
    font-size: 20px;
    font-weight: 500;
}

table {
    width: 100%;
    border: 1px solid #000;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #000;
    /* padding: 8px; */
}



.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>